import React, { createRef } from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Modal, Form, Select, message } from 'antd'

const { Item } = Form
const { Option } = Select

class SelectedModal extends Component {
  formRef = createRef()
  async submitHandle (d) {
    const hide = message.loading('提交中', 120)
    this.$put('/api/xapc/remuneration/updateStatus', {
      ids: this.props.data,
      status: d.status
    }).then(res => {
      hide()
      if (res.status !== 1) {
        return message.warning(res.message)
      }
      message.success('修改成功')
      this.props.refreshData()
      this.props.hide()
    }).catch(() => {
      hide()
    })
  }

  componentDidUpdate (prev) {
    if (!prev.visible && this.props.visible) {
      this.formRef.current.resetFields()
    }
  }

  render () {
    return (
      <Modal title='批量修改状态' open={this.props.visible} maskClosable={false} onCancel={() => this.props.hide()} onOk={() => { this.formRef.current.submit() }}>
        <Form ref={this.formRef} labelCol={{ flex: '88px' }} onFinish={(d) => this.submitHandle(d)}>
          <Item label='审批状态' name='status' rules={[{ required: true, message: '审批状态不能为空' }]}>
            <Select placeholder='请选择'>
              {this.props.statusList.map((li, i) => {
                return <Option value={li.value} key={i}>{li.title}</Option>
              })}
            </Select>
          </Item>
        </Form>
      </Modal>
    )
  }
}

SelectedModal.propTypes = {
  visible: PropTypes.bool,
  data: PropTypes.array,
  hide: PropTypes.func,
  refreshData: PropTypes.func,
  statusList: PropTypes.array
}

SelectedModal.defaultProps = {
  visible: false,
  data: [],
  hide: () => {},
  refreshData: () => {},
  statusList: []
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(SelectedModal)
